<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>ACC670101B</title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function() {
				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
		        }).click(function() {
		        	if (validateEmpty()) {
		        		if (checkCitizenId(document.getElementById("citizenId").value)) {
		        			$("#saveForm").submit();
		        		} else {
		        			document.getElementById("citizenId").value = "";
		        			document.getElementById("#citizenId").innerHTML = "เลขประจำตัวประชาชนไม่ถูกต้อง";
		        		}
		        	}
		        });
				$("#reset").button({
		            icons: {
		                primary: "ui-icon-power"
		            }
		        }).click(function() {
		        	document.getElementById("job").value = "reset";
		        	$("#saveForm").submit();
		        });
				$("#back").button({
		            icons: {
		                primary: "ui-icon-arrowreturnthick-1-w"
		            }
		        }).click(function() {
		        	document.getElementById("job").value = "back";
		        	$("#saveForm").submit();
		        });
			});
			function showArea(v, mode) {
				if (v == "2") {
					document.getElementById("nhsoZone").style.display = "inline";
					document.getElementById("province").style.display = "none";
					if (mode == 1){
						document.getElementById("nhsoZone").value = " ";
					}
				} else if (v == "3") {
					document.getElementById("province").style.display = "inline";
					document.getElementById("nhsoZone").style.display = "none";
					if (mode == 1){
						document.getElementById("province").value = " ";
					}
				} else {
					document.getElementById("nhsoZone").style.display = "none";
					document.getElementById("province").style.display = "none";
				}
			}
			function setAreaCode(v) {
				document.getElementById("areaCode").value = v;
			}
			function validatePassword(value) {
				var p = value;
				var errors = "";
				if(value != null && value != ""){
					if (p.length < 8) {
						errors += "รหัสผ่านต้องไม่น้อยกว่า 8 หลัก <br/>";
					}
					if (p.search(/(?=.*\d)/) < 0) {
						errors += "รหัสผ่านต้อง ประกอบด้วยตัวเลข <br/>";
					}
					if (p.search(/(?=.*[a-z])/) < 0) {
						errors += "รหัสผ่านต้อง ประกอบด้วยอักษรตัวเล็ก <br/>";
					}
					if (p.search(/(?=.*[A-Z])/) < 0) {
						errors += "รหัสผ่านต้อง ประกอบด้วยอักษรตัวใหญ่ <br/>";
					}
					if (errors.length > 0) {
						document.getElementById("errorMessage").innerHTML = errors;
						document.getElementById("passwd").value = "";
						document.getElementById("passwd").focus();
						return false;
					} else {
						document.getElementById("errorMessage").innerHTML = "";
						return true;
					}
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC670101')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc67" method="post">
		<input type="hidden" name="app" id="app" value="ACC670101"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="oldPasswd" id="oldPasswd" value="${user.passwd}"/>
		<c:if test="${userInfo.areaLevel != 2}" >
			<input type="hidden" name="areaCode" id="areaCode" value="${user.areaCode}"/>
		</c:if>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC670101}</b></th>
			</tr>
			<tr>
				<td colspan="2">
					<span id="errorMessage" class="red"></span>
				</td>
			</tr>
			<tr>
				<td width="20%" class="bold">รหัสผู้ใช้งานระบบ : </td>
				<td>
				<c:if test="${job == 'save'}">
					<input type="text" id="userId" name="userId" size="15" maxlength="15" value="${user.userId}"/><span class="red" id="#userId">*</span>
				</c:if>
				<c:if test="${job == 'update'}">
					${user.userId}
					<input type="hidden" name="userId" id="userId" value="${user.userId}"/>
				</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">รหัสผ่าน : </td>
				<td>				
					<input type="password" id="passwd" name="passwd" size="15" maxlength="15" value="${user.passwd}" onblur="validatePassword(this.value);" /><span class="red" id="#passwd">*</span>
<%-- 			<c:if test="${job == 'save'}"> 
 				</c:if>
				<c:if test="${job == 'update'}">
				<button id="reset" type="button" class="acc67-button">รีเซ็ตรหัสผ่าน</button>
				</c:if> --%>
				</td>
			</tr>
			<tr>
				<td class="bold">ชื่อผู้ใช้งานระบบ : </td>
				<td><input type="text" id="userName" name="userName" size="30" maxlength="50" value="${user.userName}"/><span class="red" id="#userName">*</span></td>
			</tr>
			<tr>
				<td class="bold">เลขประจำตัวประชาชน : </td>
				<td><input type="text" id="citizenId" name="citizenId" size="15" maxlength="13" onkeypress="return numberOnly(event);" value="${user.citizenId}"/><span class="red" id="#citizenId">*</span></td>
			</tr>
			<tr>
				<td class="bold">E-mail : </td>
				<td><input type="text" id="email" name="email" size="30" maxlength="50" value="${user.email}"/></td>
			</tr>
			<tr>
				<td class="bold">พื้นที่รับผิดชอบ : </td>
				<td>
					<c:if test="${userInfo.areaLevel != 2}" >
						<select name="areaLevel" id="areaLevel" onchange="showArea(this.value);">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="al" items="${areaLevel}">
							<c:if var="selected" test="${user.areaLevel == al.key}" />
							<option value="${al.key}" ${selected ? 'selected' : ''}>${al.value}</option>
					    </c:forEach>
					    </select>
					    <select name="nhsoZone" id="nhsoZone" style="display: none;" onchange="setAreaCode(this.value,'1');">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="nhsoZone" items="${lsNhsoZone}">
							<c:if var="selected" test="${user.areaCode == nhsoZone.NHSO_ZONE}" />
							<option value="${nhsoZone.NHSO_ZONE}" ${selected ? 'selected' : ''}>${nhsoZone.NHSO_ZONENAME}</option>
					    </c:forEach>
					    </select>
					    <select name="province" id="province" style="display: none;" onchange="setAreaCode(this.value,'1');">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="province" items="${lsProvince}">
							<c:if var="selected" test="${user.areaCode == province.PROVINCE_ID}" />
							<option value="${province.PROVINCE_ID}" ${selected ? 'selected' : ''}>${province.PROVINCE_NAME}</option>
					    </c:forEach>
					    </select>
				    	<script>showArea("${user.areaLevel}","0");</script>
					</c:if>
					<c:if test="${userInfo.areaLevel == 2}">
						<input type="hidden" name="areaLevel" id="areaLevel" value="3"/>
					    <select name="areaCode" id="areaCode">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="province" items="${lsProvince}">
							<c:if var="selected" test="${user.areaCode == province.PROVINCE_ID}" />
							<option value="${province.PROVINCE_ID}" ${selected ? 'selected' : ''}>${province.PROVINCE_NAME}</option>
					    </c:forEach>
					    </select>
					</c:if>
				    <span class="red" id="$areaLevel">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">สิทธิ์ผู้ใช้งานระบบ : </td>
				<td>
					<select name="roleId" id="roleId">
						<c:forEach var="role" items="${lsRole}">
						<c:if var="selected" test="${user.roleId == role.ROLE_ID}" />
							<option value="${role.ROLE_ID}" ${selected ? 'selected' : ''}>${role.ROLE_NAME}</option>
					    </c:forEach>
					</select><span class="red" id="$roleId">*</span>
					<%-- <c:if test="${userInfo.areaLevel == 2}">
						<c:forEach var="role" items="${lsRole}">
							<c:if test="${puc == role.ROLE_ID}">
								${role.ROLE_NAME}
								<input type="hidden" name="roleId" id="roleId" value="${role.ROLE_ID}">
							</c:if>
						</c:forEach>
					</c:if> --%>
				</td>
			</tr>
			<c:if test="${job == 'update' && user.active != 'I'}">
				<tr>
					<td class="bold">สถานะผู้ใช้งาน : </td>
					<td>
						<select name=active id="active">
							<option value="">----- เลือก -----</option>
							<c:forEach var="us" items="${userStatus}">
							<c:if var="selected" test="${us.key == user.active}" />
								<option value="${us.key}" ${selected ? 'selected' : ''}>${us.value}</option>
							</c:forEach>
						 </select><span class="red" id="$userStatus">*</span>
					</td>
				</tr>
			</c:if>
			<tr>
				<td colspan="2" align="center">
				<c:if test="${fn:contains(auth, 'I')}">
					<button id="save" type="button" class="acc67-button">บันทึกข้อมูล</button>
				</c:if>
				&nbsp;&nbsp;
				<button id="back" type="button" class="acc67-button">ย้อนกลับ</button>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>